<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				position: relative;
			}
			.top{
				width: 1000px;
				height: 400px;
				border: 1px solid black;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -500px;
				overflow: hidden;
			}
			
			.top>ul{
				position: absolute;
				top:400px;
				transition: top 0.6s;
			}
			.top>ul>li{
				float: left;
				width: 200px;
				height: 100px;
				list-style: none;
				text-align: center;
				line-height: 100px;
			}
			.foot{
				width: 1200px;
				height: 300px;
				border: 1px solid black;
				position: absolute;
				top: 420px;
				left: 50%;
				margin-left: -600px;
			}
			.foot>img{
				width: 280px;
				height: 230px;
				/*float: right;*/
			}
			.foot>#left1{
				position: absolute;
				left: -400px;
				float: right;
				/*margin-right: 10px;*/
				transition: all 0.5s; 
			}
			.foot>#left2{
				float: right;
				/*margin-right: 10px;*/
				transition: all 0.8s; 
			}
			.foot>#right1{
				float: right;
				/*margin-right: 10px;*/
				transition: all 0.5s; 
			}
			.foot>#right2{
				float: right;
				transition: all 0.8s; 
			}
		</style>
	</head>
	<body>
		<div class="top">
			<ul id="lis">
				<li>1</li>
				<li>1</li>
				<li>1</li>
				<li>1</li>
				<li>1</li>
				<li>2</li>
				<li>2</li>
				<li>2</li>
				<li>2</li>
				<li>2</li>
				<li>3</li>
				<li>3</li>
				<li>3</li>
				<li>3</li>
				<li>3</li>
				<li>4</li>
				<li>4</li>
				<li>4</li>
				<li>4</li>
				<li>4</li>
			</ul>
			
		</div>
		<div class="foot">
		<!--<div class="left">-->	
			<img src="../img/1.jpeg" alt="" id="left1"/>
			<img src="../img/2.jpg" alt="" id="left2"/>
		<!--</div>-->
		<!--<div class="right">-->
			<img src="../img/3.jpeg" alt="" id="right1"/>
			<img src="../img/4.jpeg" alt="" id="right2"/>
		<!--</div>-->
			
		</div>
		<script type="text/javascript">
				var lis=document.getElementById("lis");
				window.onload=function(){
					lis.style.top="0px";
					
				}
				
			</script>
	</body>
</html>
